<template>
  <div class="index">
    <el-container>
      <el-header height="68px">
        <m-header></m-header>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <m-aside></m-aside>
        </el-aside>
        <el-main>
          <div class="main">
            <div class="header-top">
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>兼职信息管理</el-breadcrumb-item>
              </el-breadcrumb>
              <h2 class="title">兼职信息管理</h2>
            </div>
            <div class="row">
              <el-form :inline="true" :model="formInline"  class="demo-form-inline">
                <div class="water">

                  <span class="waterTime">创建时间：</span>
                  <el-date-picker
                    v-model="formInline.time"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </div>
     
                <el-form-item label="标题：">
                  <el-input v-model="formInline.name" placeholder="标题"></el-input>
                </el-form-item>
                
                <el-form-item>
                  <el-button type="primary" @click="onSubmit">搜索</el-button>
                </el-form-item>
              </el-form>
              <el-row style="margin-bottom:20px">

                <el-button type="primary" @click="addJob" >添加兼职</el-button>
              </el-row>

              <el-table
                :data="tableData"
                border
                :cell-style="{'text-align':'center'}"

                :header-cell-style="{
                  'background-color': '#f5f5f5',
                  'color':'#555',
                  'text-align':'center'
                }"
                style="width: 100%">
                
                <el-table-column
                  prop="listTitle"
                  label="标题">
                </el-table-column>  
                <el-table-column
                  prop="paymentTerms"
                  label="结算方式">
                  <template slot-scope="scope">
                    <span v-if="scope.row.paymentTerms == '10'">日结</span>
                    <span v-if="scope.row.paymentTerms == '20'">周结</span>
                    <span v-if="scope.row.paymentTerms == '30'">月结</span>

                  </template>
                </el-table-column>
                <el-table-column
                  prop="isDisplay"
                  label="是否显示">
                  <template slot-scope="scope">

                    <el-button @click="showClick(scope.row)" type="text" size="small" v-if="scope.row.isDisplay == '0'">不显示</el-button>
                    <el-button @click="showClick(scope.row)" type="text" size="small" v-if="scope.row.isDisplay == '1'">显示</el-button>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="isActive"
                  label="状态">
                  <template slot-scope="scope">
                    <el-button @click="statusClick(scope.row)" type="text" size="small" v-if="scope.row.isActive == '0'">不可报名</el-button>
                    <el-button @click="statusClick(scope.row)" type="text" size="small" v-if="scope.row.isActive == '1'">可报名</el-button>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="createDate"
                  label="创建时间">
                </el-table-column>
                
                <el-table-column
                  label="操作"
                  width="360">
                  <template slot-scope="scope">
                    <el-button @click="redactClick(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="sendClick(scope.row)" type="text" size="small">投递管理</el-button>
                  </template>
                </el-table-column>
                
              </el-table>
              
              <div class="block">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[20, 50, 100]"
                  :page-size="pagesize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
              </div>

              <el-dialog
                :visible.sync="dialogVisible"
                :close-on-click-modal=true
                custom-class="diaself"
                center
                top='15vh'
                width="40%">
                <el-form :model="ruleForm"   label-width="100px" class="demo-ruleForm">
                  <el-form-item label="标题" prop="listTitle" required>
                    <el-input v-model="ruleForm.listTitle"></el-input>
                  </el-form-item>
                  
                  <el-form-item label="兼职内容" prop="detailContent" >
                    <el-input type="textarea" v-model="ruleForm.detailContent"></el-input>
                  </el-form-item>
                  <el-form-item label="联系方式" prop="contactInfo" required>
                    <el-col :span="10" >
                      <el-form-item  prop="contactInfo" >
                        <el-input v-model="ruleForm.contactInfo"></el-input>
                        
                      </el-form-item>
                    </el-col>
                    <el-col :span="10" >
                      <el-form-item  prop="isPublicContactInfo" label="是否公开" required>
                        <el-select v-model="ruleForm.isPublicContactInfo" >
                          <el-option label="不公开" value="0"></el-option>
                          <el-option label="公开" value="1"></el-option>
                        </el-select>
                        
                      </el-form-item>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="公司名称"  required>
                    <el-col :span="10" >
                      <el-form-item  prop="companyName" >
                        <el-input v-model="ruleForm.companyName"></el-input>
                        
                      </el-form-item>
                    </el-col>
                    
                  </el-form-item>
                  <el-form-item label="报酬" required>
                    <el-col :span="4" >
                      <el-form-item  prop="salary" class="flex">
                        <el-input v-model="ruleForm.salary"></el-input>
                        <span class="span">元</span>
                        
                      </el-form-item>
                    </el-col>
                    <el-col :span="5" style="margin-left:35px">
                      <el-form-item  prop="salaryUnit" >
                        <el-select v-model="ruleForm.salaryUnit" >
                          <el-option label="小时" value="10"></el-option>
                          <el-option label="天" value="20"></el-option>
                          <el-option label="次" value="30"></el-option>
                        </el-select>
                        
                      </el-form-item>
                    </el-col>
                    <el-col :span="10">
                      <el-form-item  prop="paymentTerms" label="结算周期" required>
                        <el-select v-model="ruleForm.paymentTerms" >
                          <el-option label="日结" value="10"></el-option>
                          <el-option label="周结" value="20"></el-option>
                          <el-option label="月结" value="30"></el-option>
                        </el-select>
                        
                      </el-form-item>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="性别要求" prop="sex" required>
                    <el-radio-group v-model="ruleForm.sex">
                      <el-radio v-model="ruleForm.sex" label="10">仅限男</el-radio>
                      <el-radio v-model="ruleForm.sex" label="20">仅限女</el-radio>
                      <el-radio v-model="ruleForm.sex" label="30">不限男女</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="职位周期" required>
                    <el-col :span="8">
                      <el-form-item  prop="effective">
                        <el-select v-model="ruleForm.effective">
                          <el-option label="长期" value="10"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="是否极速上岗" prop="isEmergency" style="margin-left:15px">
                        <el-select v-model="ruleForm.isEmergency" >
                          <el-option label="极速上岗" value="1"></el-option>
                          <el-option label="非极速上岗" value="0"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="工作地点">
                    <el-col :span="8">
                      <el-form-item  prop="workLocation" >
                        <el-input v-model="ruleForm.workLocation"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="工作时间" prop="workTime">
                        <el-input v-model="ruleForm.workTime"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-form-item> 
                  
                  <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleForm)">保存</el-button>

                  </el-form-item>
                </el-form>

              </el-dialog>
    
            </div>

          </div>
        </el-main>
      </el-container>

    </el-container>
  </div>
</template>
<script>
import { getCookie,timeChange,getQueryString } from "./until/index";
function init(){
  this.$ajax.get("bizGetJianzhiItemList.ashx?token=" +getCookie("token")+
        '&dateFrom='+this.startTime +
        '&dateTo='+this.endTime +
        '&title='+this.formInline.name+
        '&pz='+this.pagesize+
        '&pi='+this.currentPage
      )
      .then(res => {
        if (res.data.code === "200") {
          var data = res.data.data;
          // console.log(data)
          this.total = Number(data.rowCount)
          if(data.rowCount > 0){

            this.tableData = data.JianzhiList;
          }else{
            this.tableData=[]
          }
          
        } else {
          this.$message.error(res.data.msg );
        }
      })
      .catch(error => {
        console.log(error);
      });
}
function detail(jianZhiID){
  this.$ajax.get("bizGetJianzhiDetail.ashx?token=" +getCookie("token")+
        '&jianZhiID='+jianZhiID
      )
      .then(res => {
        console.log(res)
        if (res.data.code === "200") {
          var data = res.data.data;
          this.ruleForm = data
          this.ruleForm.companyName = getCookie('company')
          
        } else {
          this.$message.error(res.data.msg );
        }
      })
      .catch(error => {
        console.log(error);
      });
}
function showStatus(jianZhiID){
  this.$ajax.get("bizChangeJianzhiDisplayStatus.ashx?token=" +getCookie("token")+
        '&jianZhiID='+jianZhiID
      )
      .then(res => {
        if (res.data.code === "200") {
          var data = res.data.data;
        
         this.$message({
            type: 'success',
            message: res.data.msg,
            onClose:function(){

              window.location.reload();
            }
          }); 
        } else {
          this.$message.error(res.data.msg );
        }
      })
      .catch(error => {
        console.log(error);
      });
}
function userStatus(jianZhiID){
  this.$ajax.get("bizChangeJianZhiActiveStatus.ashx?token=" +getCookie("token")+
        '&jianZhiID='+jianZhiID
      )
      .then(res => {
        if (res.data.code === "200") {
          var data = res.data.data;
        
         this.$message({
            type: 'success',
            message: res.data.msg,
            onClose:function(){

              window.location.reload();
            }
          }); 
        } else {
          this.$message.error(res.data.msg );
        }
      })
      .catch(error => {
        console.log(error);
      });
}
function addjob(){
  
  this.$ajax.get("bizSaveJianzhiItemInfo.ashx?token=" +getCookie("token")+
        '&jianZhiID='+this.ruleForm.jianZhiID+
        '&listTitle='+this.ruleForm.listTitle+
        '&detailTitle='+this.ruleForm.detailTitle+
        '&salary='+this.ruleForm.salary+
        '&salaryUnit='+this.ruleForm.salaryUnit+
        '&paymentTerms='+this.ruleForm.paymentTerms+
        '&sex='+this.ruleForm.sex+
        '&effective='+this.ruleForm.effective+
        '&isEmergency='+this.ruleForm.isEmergency+
        '&contactInfo='+this.ruleForm.contactInfo+
        '&detailContent='+this.ruleForm.detailContent+
        '&workLocation='+this.ruleForm.workLocation+
        '&workTime='+this.ruleForm.workTime+
        '&companyName='+this.ruleForm.companyName+
        '&isPublicContactInfo='+this.ruleForm.isPublicContactInfo
      )
      .then(res => {
        if (res.data.code === "200") {
          var data = res.data.data;
        
         this.$message({
            type: 'success',
            message: res.data.msg,
            onClose:function(){
              
              window.location.reload();
              
            }
          }); 
        } else {
          this.$message.error(res.data.msg );
          // console.log(res)
        }
      })
      .catch(error => {
        console.log(error);
      });
}
export default {
  data() {
    return {
      pagesize: 20, //每页显示条数
      currentPage: 1, //初始页
      total: 0, //总条数
      startTime:'',
      dialogVisible:false,
      endTime:'',
      formInline: {
        time:'',//查询时间
        name: '', //标题
      },
      ruleForm: {
        jianZhiID:'00000000-0000-0000-0000-000000000000',
        detailContent:'',//兼职内容
        detailTitle:'',//详细标题
        listTitle: '', //标题
        contactInfo:'',//联系方式
        salary:'',//薪水
        salaryUnit:'10',//薪水单位
        paymentTerms:'10',//结算单位
        sex:'30',//性别
        effective:'10',//有效时间
        isEmergency:'1',//是否紧急上岗
        workLocation:'不限',//工作地点
        workTime:'不限',//工作时间
        companyName:'',//商户名称
        isPublicContactInfo:'1'//是否公开联系方式
      },

      tableData: [],

    };
  },
  created() {
    this.ruleForm.companyName = getCookie('company')
    
    if(getQueryString()){
      
      this.formInline.name = getQueryString()
    }
    init.call(this)
  },
  methods: {
    onSubmit() {
      if(this.formInline.time){

        this.startTime = timeChange(this.formInline.time[0])
        this.endTime = timeChange(this.formInline.time[1])
      }
      
      
      init.call(this)
    },
    handleCurrentChange(num) {
      this.currentPage = num;
      init.call(this)
    },
    handleSizeChange(val) {
      this.pagesize = val;
      init.call(this)
    },
    
    statusClick(row){//改变是否可报名状态
      
        
      this.$confirm('是否要改变可报名状态？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        userStatus.call(this,row.jianZhiID)
        
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出'
        });          
      });
      
    
    },
    showClick(row){//是否显示
      this.$confirm('是否要改变显示状态？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        showStatus.call(this,row.jianZhiID)
        
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出'
        });          
      });
    },
    redactClick(row){//编辑
      
      detail.call(this,row.jianZhiID)
      
      this.dialogVisible = true
       
      
    },
    sendClick(row){//投递管理
      let routeUrl = this.$router.resolve({ path: '/send', query: { userID: row.jianZhiID }});
      window.open(routeUrl .href, '_blank');
    },
    addJob(){//添加兼职管理
      this.dialogVisible = true
      var companyName = getCookie('company')
      this.ruleForm = {
        jianZhiID:'00000000-0000-0000-0000-000000000000',
        detailContent:'',//兼职内容
        detailTitle:'',//详细标题
        listTitle: '', //标题
        contactInfo:'',//联系方式
        salary:'',//薪水
        salaryUnit:'10',//薪水单位
        paymentTerms:'10',//结算单位
        sex:'30',//性别
        effective:'10',//有效时间
        isEmergency:'1',//是否紧急上岗
        workLocation:'不限',//工作地点
        workTime:'不限',//工作时间
        companyName:companyName,//商户名称
        isPublicContactInfo:'1'//是否公开联系方式
      }
    },
    submitForm(ruleForm){//保存兼职
      
      this.dialogVisible = false
      addjob.call(this)
      

    }



    
  }
};
</script>
<style scoped>
.index {
  overflow: hidden;
}
.span{position: absolute;right: -28px;top: 0px;padding: 0 10px}
.water{margin-right: 20px;display: inline-block}
.waterTime{font-size: 14px;color: #606266;padding: 0 12px 0 0;box-sizing: border-box;}
.el-header {
  background-color: #3a4759;
  color: #fff;
}
.el-aside {
  background-color: #485668;
  color: #333;
  text-align: center;
  line-height: 200px;
  overflow: hidden;
}
.el-main {
  background-color: #f0f2f5;
  color: #333;
  text-align: center;
  height: 100%;
  min-height: 740px
}

.header-top{
  margin: -20px -20px 20px;
  padding: 15px 20px;
  background: #fff;
  
}
.header-top .title{
  margin:15px 0 0;
  font-weight: 600;
  text-align: center;
  font-size: 20px;
}
.row{
  background: #fff;
  padding: 20px 30px;
  text-align: left
}
.block {
  padding: 20px;
}
.message{
  margin-top: 20px;
}
</style>
  